<template>
  <div>
    <header class="nav" :class="bg ? 'nav_active' : 'nav_default'">
      <nav class="h">
        <div class="container">
          <div class="s_flex s_justify_content_between s_align_items h">
            <div class="h_logo">
              <img
                @click="home"
                v-if="bg"
                src="@/assets/web/logo2.png"
                alt="logo"
              />
              <img
                @click="home"
                v-else
                src="@/assets/web/logo.png"
                alt="logo"
              />
            </div>
            <div class="sq_xl" style="width: 100%">
              <ul class="s_nav_ul s_flex s_justify_content_end s_align_items">
                <li>
                  <router-link
                    style="background: none; border: 1px solid #fff"
                    class="sq_sign_btn sq_content"
                    to="/web/guanjia"
                    >专利管家</router-link
                  >
                </li>
                <!-- <li
                  v-for="(item, index) in list"
                  :key="index"
                  @mouseenter="mouseenter(index)"
                  @mouseleave="check = -1"
                >
                  <router-link
                    :class="
                      $route.path == item.path || $route.query.type == item.id
                        ? 's_nav_ul_a li_active'
                        : 's_nav_ul_a'
                    "
                    :to="item.path"
                    >{{ item.menu }}</router-link
                  >
                  <transition name="el-fade-in-linear">
                    <ul
                      @mouseleave="mouseleave"
                      class="child"
                      v-if="check == index && item.children"
                    >
                      <li
                        v-for="(childs, key) in item.children"
                        :class="$route.path == childs.path ? 'active' : ''"
                        :key="key"
                      >
                        <router-link
                          :to="{
                            path: childs.path,
                            query: { type: childs.id },
                          }"
                          >{{ childs.menu }}</router-link
                        >
                      </li>
                    </ul>
                  </transition>
                </li> -->
              </ul>
            </div>
            <div class="mb_menu sq_xs" @click="addActive">
              <div class="header-menu-icon open">
                <span class="easing"></span>
                <span class="easing"></span>
              </div>
            </div>
          </div>
        </div>
      </nav>
    </header>
    <div class="mb_nav sq_xs" :class="m_Active ? 'm_active' : ''" ref="mb_nav">
      <div class="s_flex s_justify_content_between s_align_items h mb_nav_logo">
        <div class="h_logo">
          <img
            @click="home"
            v-if="bg"
            src="@/assets/web/logo2.png"
            alt="logo"
          />
          <img @click="home" v-else src="@/assets/web/logo.png" alt="logo" />
        </div>
        <div class="mb_menu" @click="mb_close">
          <div class="header-menu-icon open">
            <span class="easing"></span>
            <span class="easing"></span>
          </div>
        </div>
      </div>
      <div class="nav_top">
        <div class="ft_item" v-for="(item, index) in list" :key="index">
          <div
            class="s_flex s_justify_content_between s_align_items_center"
            @click="getChildren(item)"
          >
            <h3>{{ item.menu }}</h3>
            <span
              v-if="item.children"
              :class="
                getChildrens == item.id
                  ? 'iconfont icon-jian'
                  : 'iconfont icon-jia'
              "
            ></span>
          </div>
          <ul class="ft_ul" v-if="item.children && getChildrens == item.id">
            <li
              class="sq_content"
              v-for="(items, key) in item.children"
              :key="key"
            >
              <router-link :to="items.path">{{ items.menu }}</router-link>
            </li>
          </ul>
        </div>
        <div class="gy_users">
          <div class="container">
            <div class="gy_users_item">
              <div
                class="contact sq_content ft_color s_flex s_align_items_center"
              >
                <span>关于我们：</span>
                <span>
                  <i class="iconfont icon-weixin1"></i
                  >&nbsp;&nbsp;微信&nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp;
                </span>
                <span>
                  <i class="iconfont icon-weibo1"></i>&nbsp;&nbsp;微博</span
                >
              </div>
              <div
                class="sq_content ft_color line_h_26 h_top" @click='ICP'
                style="font-size: 12px; line-height: 18px"
              >
                版权所有©2019-2020顺企知识产权保护服务中心 <br />
                粤ICP备2022132806号
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>


<script>
export default {
  props: ["bg"],
  data() {
    return {
      list: [
        {
          id: 1,
          menu: "首  页",
          path: "/web/home",
        },
        {
          id: 5,
          menu: "政策法规",
          path: "/web/news",
        },
        {
          id: 2,
          menu: "数据平台",
          path: "/web/guanjia",
          // children: [
          //   {
          //     id: "2",
          //     menu: "专利管家",
          //     path: "/web/guanjia",
          //   },
          //   {
          //     id: "2",
          //     menu: "数据管理",
          //     path: "/web/manage",
          //   },
          // ],
        },
        {
          id: 3,
          menu: "海外援助",
          path: "/web/overseas/assistance",
          children: [
            {
              id: "3",
              menu: "海外维权",
              path: "/web/overseas/assistance",
            },
            {
              id: "3",
              menu: "海外智联体",
              path: "/web/overseas/association",
            },
            {
              id: "3",
              menu: "海外预警",
              path: "/web/overseas/warning",
            },
          ],
        },
        {
          id: 4,
          menu: "企业家+科学家",
          path: "/web/enterprise",
          children: [
            {
              id: "4",
              menu: "优秀专利汇总",
              path: "/web/enterprise",
            },
            {
              id: "4",
              menu: "优秀团队及领头人",
              path: "/web/enterprise/leader",
            },
          ],
        },
        {
          id: 6,
          menu: "知识产权金融",
          path: "/web/finance",
        },
        {
          id: 7,
          menu: "荣誉展厅",
          path: "/web/honor",
        },
        {
          id: 8,
          menu: "中心服务",
          path: "/web/services/introduce",
          children: [
            {
              id: "8",
              menu: "中心介绍",
              path: "/web/services/introduce",
            },
            {
              id: "8",
              menu: "顺企动态",
              path: "/web/services/dynamic",
            },
            {
              id: "8",
              menu: "活动中心",
              path: "/web/services/central",
            },
            {
              id: "8",
              menu: "新闻资讯",
              path: "/web/services/central",
            },
          ],
        },
      ],
      active: false,
      check: -1,
      getChildrens: 0,
      m_Active: 0,
      num: 0,
    };
  },
  methods: {
    ICP(){
      window.open('https://beian.miit.gov.cn/')
    },
    mouseenter(index) {
      this.check = index;
    },
    mouseleave() {
      this.check = -1;
    },
    home() {
      // window
      if (this.$route.path == "/web/home") {
        this.$emit("moveTo", true);
      } else {
        this.$router.push("/web/home");
      }
    },
    getChildren(item) {
      if (this.getChildrens == item.id) {
        this.getChildrens = 0;
        return;
      } else if (item.children) {
        this.getChildrens = item.id;
        return;
      } else if (item.path == "/web/home") {
        this.m_Active = 0;
        this.$router.push(item.path);
        this.$emit("moveTo", true);
        return;
      } else {
        // this.m_Active = 0;
        this.$router.push(item.path);
        return;
      }
    },
    addActive() {
      let than = this;
      let num = 0;
      let time = setInterval(() => {
        than.m_Active = 1;
        num++;
        than.$refs.mb_nav.style = `background:radial-gradient(circle at 100% 0,var(--color7) ${num}%,rgba(0, 0, 0, 1) ${num}%)`;
        if (num == 120) {
          clearInterval(time);
        }
      }, 2);
    },
    mb_close() {
      let than = this;
      let num = 120;
      let time = setInterval(() => {
        num--;
        than.$refs.mb_nav.style = `background:radial-gradient(circle at 100% 0,var(--color7) ${num}%,rgba(0, 0, 0, 1) ${num}%)`;
        if (num == 0) {
          clearInterval(time);
          than.m_Active = 0;
        }
      }, 2);
    },
  },
};
</script>

<style lang="less" scope>
.nav {
  width: 100%;
  height: 80px;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9;
}

.nav_active {
  background-color: #2a3566;
  .s_nav_ul li .li_active::after {
    content: "";
    width: 15px;
    height: 2px;
    background-color: #fff;
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translate(-50%, -50%);
  }
  .s_nav_ul .li_active {
    color: #fff !important;
    position: relative;
  }
  .s_nav_ul li:hover {
    color: #fff;
  }
  .s_nav_ul li {
    color: #02214e;
  }
  .child {
    position: absolute;
    top: 48px;
    left: 0;
    z-index: 20;
    width: 164px;
    background: #2a3566;
    // box-shadow: 0px 3px 7px 0px #eaedf4;
    text-align: center;
    transform: translate(-50%);
    left: 50%;
    padding: 0 0 30px 0;
    li {
      margin-left: 0;
      margin-top: 27px;
      color: #02214e;
      .s_nav_ul .li_active {
        color: #fff !important;
        position: relative;
      }
      &:hover {
        color: #fff !important;
      }
    }
  }
  .header-menu-icon span {
    display: block;
    width: 22px;
    height: 2px;
    background-color: #fff;
  }
}
.nav_default {
  background-color: #fff;
  box-shadow: 0px 3px 7px 0px #eaedf4;
  .s_nav_ul li .li_active::after {
    content: "";
    width: 15px;
    height: 2px;
    background-color: var(--color);
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translate(-50%, -50%);
  }
  .s_nav_ul .li_active {
    color: var(--color) !important;
    position: relative;
  }
  .child {
    position: absolute;
    top: 48px;
    left: 0;
    z-index: 20;
    width: 164px;
    background: #ffffff;
    box-shadow: 0px 3px 7px 0px #eaedf4;
    text-align: center;
    transform: translate(-50%);
    left: 50%;
    padding: 0 0 30px 0;
    li {
      margin-left: 0;
      margin-top: 27px;
      color: var(--color2) !important;
      .s_nav_ul .li_active {
        color: var(--color) !important;
        position: relative;
      }
      &:hover {
        color: var(--color) !important;
      }
    }
  }
  .header-menu-icon span {
    display: block;
    width: 22px;
    height: 2px;
    background-color: #000;
  }
}

.nav .h,
.nav .h .container {
  height: 100%;
}

.nav .h .h_logo img {
  height: 43px;
}

.h_logo {
  cursor: pointer;
}

.s_nav_ul {
  margin-left: 5%;
}

.s_nav_ul li {
  margin-left: 40px;
  color: var(--color2);
  position: relative;
}

.s_nav_ul li .s_nav_ul_a {
  color: inherit;
  cursor: pointer;
  padding: 10px 0;
}

.active {
  color: var(--color) !important;
}

.s_nav_ul {
  height: 100%;
}

.sq_sign_btn:hover {
  color: #fff;
}

@media (max-width: 750px) {
  .mb_menu {
    i {
      color: #fff;
      font-size: 20px;
    }
  }
  .nav {
    height: 50px;
  }
  .nav .h .h_logo img {
    height: 29px;
  }
  .mb_nav {
    position: fixed;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    z-index: 99;
    color: #e9e9e9;
    display: none;
    opacity: 0;
    background: radial-gradient(
      circle at 100% 0,
      var(--color7) 0%,
      rgba(0, 0, 0, 1) 0%
    );
    transition: all 0.5s ease 0s;
    will-change: transform;
    // padding:0 30px;
    .ft_item {
      width: 90%;
      margin: 0 auto;
      padding: 0 4px 15px 36px;
      border-bottom: 1px solid #2b3e51;
      margin-bottom: 15px;
      h3 {
        font-size: 17px;
        font-weight: 800;
      }
      li {
        margin-top: 18px;
        padding: 0 30px;
      }
    }
    .h_logo img {
      height: 29px;
    }
  }
  .m_active {
    opacity: 1;
    display: block;
  }
  .mb_nav_logo {
    width: 90%;
    height: 50px;
    margin: 0 auto;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    padding: 10px 0;
  }
  .nav_top {
    margin-top: 50px;
    padding: 20px 0;
  }
  .gy_users {
    // margin-top: 25px;
    position: absolute;
    bottom: 15px;
    z-index: 2;
    width: 100%;
    .gy_users_item {
      .contact {
        border-bottom: 1px solid #2b3e51;
        padding-bottom: 10px;
      }
      margin-top: 25px;
      img {
        height: 30px;
      }
    }
  }
  .h_top {
    margin-top: 6px;
  }
  .ft_ul {
    transition: all 0.5s ease-in;
  }

  // .header-menu-icon span:nth-child(1) {
  //   margin-top: 6px;
  // }
  .header-menu-icon span:nth-child(2) {
    margin-top: 6px;
  }

  .m_active .header-menu-icon span:nth-child(1) {
    transform: rotate(45deg);
    margin-top: 0;
  }

  .m_active .header-menu-icon span:nth-child(2) {
    transform: rotate(-45deg);
    margin-top: -2px;
  }
  .header-menu-icon span {
    display: block;
    width: 22px;
    height: 2px;
    background-color: #fff;
  }
}
</style>